<template>
	<view>

		
		<view class="page">
			<!-- <view class="banner">
				<uni-swiper-dot :info="bannerImage" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in bannerImage" :key="index">
							<view :class="item.colorClass" class="swiper-item">
								<image :src="item.url"  mode="aspectFill" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view> -->
			<image src="http://yao.hayzon.com/static/replace0823/01.png" mode="widthFix"></image>
			<view class="list-container">
				<view class="nav-list">
					<view v-for="(navItem, index) in navList" :key="index">
						<navigator class="nav-item" :url="navItem.linkUrl">
							<image class="nav-icon" :src="navItem.iconUrl"></image>
							<view class="nav-title">{{navItem.title[0]}}</view>
							<view class="nav-title">{{navItem.title[1]}}</view>
						</navigator>
					</view>
				</view>
				<view class="card-list">
					<view v-for="(recomment,index) in recommentList" :key="index">
						<view class="img-box">

							<image class="img" :src="recomment.img"></image>

						</view>
					</view>
				</view>
			</view>
		</view>

		<luBarTabNav :tabList="tabList" :barFixed="barFixed" :iconShow="false" :barHeight="barHeight" :barTop="barTop" :barId="barId"
		 ref="barTabNav">
			<view id="item1" class="tabbody">

				<view v-for="(clinic, index) in clinicList" :key="index" style="noline">
					<product-list :data="clinic"></product-list>
					<br />
				</view>

			</view>

			<view id="item2" class="tabbody">

				<view v-for="(shop, index) in shopList" :key="index">
					<product-list :data="shop"></product-list>
					<br />
				</view>


			</view>
		</luBarTabNav>

	</view>

</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
	import luBarTabNav from "@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue";
	import uniGrid from "@/components/uni-grid/uni-grid.vue";
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue";
	import productList from "@/pages/yaodao/components/productList.vue"
	export default {
		components: {
			uniSwiperDot,
			luBarTabNav,
			uniGrid,
			uniGridItem,
			productList
		},
		data() {
			return {
				shopList: require('../../data/stores.json'),
				clinicList: require('../../data/clinic.json'),
				navList: require('../../data/icon.json'),
				recommentList: require('../../data/recomments.json'),
				current: 0,
				mode: 'default',
				dotsStyles: {
					backgroundColor: 'rgba(255, 90, 95,0.3)',
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
					selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
				},
				bannerImage: [{
						colorClass: 'uni-bg-red',
						url: 'http://yao.hayzon.com/static/replace0823/01.png',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'http://yao.hayzon.com/static/replace0823/02.png',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'http://yao.hayzon.com/static/replace0823/03.png',
						content: '内容 C'
					}
				],


				barFixed: true,
				barHeight: "44",
				barTop: 0,
				iconShow: true,
				barId: "0",
				tabList: [{
					text: "附近诊所",
					navTarget: "#item1",
					iconClass: "icon01",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, 
				// {
				// 	text: "附近药店",
				// 	navTarget: "#item2",
				// 	iconClass: "icon02",
				// 	iconImage: "",
				// 	selectedIconClass: "",
				// 	selectedIconImage: ""
				// },
				],


			}
		},
		onPageScroll: function(e) {
			this.$refs.barTabNav._selectedTab(e.scrollTop);
		},
		methods: {

		}
	}
</script>
<style lang='scss'>
	/* .page {
		height: 1100upx;
		padding-bottom: 100upx;
	} */
	.page {

		/* padding-bottom: 80rpx; */
		.list-container {
			box-sizing: border-box;
			padding: 0 20rpx 0rpx 15rpx;
			background: #fff;

			.nav-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				padding: 0 20rpx;
				background: url(http://yao.hayzon.com/static/temp/fish.png) 100% center/100% no-repeat;

				.nav-item {
					margin: 30rpx;

					.nav-icon {
						width: 78rpx;
						height: 78rpx;
						margin: 10rpx;
					}

					.nav-title {
						margin-top: -18rpx;
						text-align: center;
						color: #666;
					}
				}
			}

			.card-list {
				width: 100%;
				height: 740rpx;
				padding: 20rpx 0;
				/* background: red; */
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				background: url(http://yao.hayzon.com/static/temp/bamboo.png) 100% center/100% no-repeat;

				.img-box {
					width: 340rpx;
					height: 340rpx;

					/* background: blue; */
					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.page image {
		width: 100%;
	}
	

	.page-content {
		position: relative;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		background-color: #eee;
		font-size: 14px;
	}

	.banner {
		position: relative;
		width: 100%;
		/* height: 200px; */
		margin-top: 10upx;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		/* align-items: center; */
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-item image {
		width: 100%;
		height: 220upx;
	}
	.tabbody {
		position: relative;
		width: 100%;
		/* border-bottom: 3px solid #4CD964; */
	}

	br {
		line-height: 1px;
	}
</style>
